<head>
    <title>礼物弹幕</title>
    <script src="../js/jquery.js"></script>
    <link rel="stylesheet" href="gift.css" media="screen" type="text/css" />
    <link rel="stylesheet" href="gift_custom.css" media="screen" type="text/css" />
	<meta name="referrer" content="no-referrer">
</head>
<body>
    <div>
        <img id="gif" src="" />
    </div>
    <script type="text/javascript">
		var giftList={};
        $(document).ready(function() {
            var ws = new WebSocket("ws://__DOMAIN__:__WS_PORT__");
            ws.onopen = function() {
                ws.send('{"cmd": "cmds", "data": ["SEND_GIFT", "GUARD_BUY"]}');
				try {
					socketInited(); // !socket初始化完毕
				} catch (err) {
					// console.log(err);
				}
            };
            ws.onmessage = function(e) {
                console.log(e.data);
                var json = JSON.parse(e.data);
                var cmd = json['cmd'];
                switch (cmd) {
					case 'GET_INFO':
                        readInfo(json['data']);
                        break;
                    case 'SEND_GIFT':
                        var giftId = json['data']['gift_id'];
                        var giftNum = json['data']["extra"]["num"];
						var giftPrice = json['data']["extra"]["price"];
						var c_type = json['data']["coin_type"];
						setGiftImage(giftId, giftNum, giftPrice, c_type);
                        break;
                    case 'GUARD_BUY':
                        var level = json['data']['guard_level'];
                        var name = 'jz';
                        if (level == 2)
                            name = 'td';
                        else if (level == 1)
                            name = 'zd';
                        setImage(name, '.png', 6000 * level);
                        break;
                }
            };
			
			function socketInited() {
				var json = {
					cmd: "GET_INFO",
					data: {
						room_id: "%room_id%",
					}
				}
				ws.send(JSON.stringify(json));
			}

			function readInfo(data) {
				var currentRoomId = data['room_id'];
				$.ajax({
					url: "http://__DOMAIN__:__PORT__/api/netProxy?url=https%3A%2F%2Fapi.live.bilibili.com%2Fxlive%2Fweb-room%2Fv1%2FgiftPanel%2FgiftConfig%3Fplatform%3Dpc%26room_id%3D"+currentRoomId,
					async: false,
					dataType: "JSON",
					success: function (data) {
						giftList = data["data"]["list"];
					}
				});
			
				//调试代码
				setGiftImage(31028, 1, 0, "gold");
				//调试代码
			}
        });
		
        var timer = null;
		var total_coin = -1;
		var coin_type = "silver";
		
		function setGiftImage(id, giftNum, giftPrice, c_type){
			   //电池礼物插队播放   //不播放时赠送银瓜子礼物                    //同为银瓜子礼物赠送时
			if(c_type == "gold" || (timer == null && coin_type == "silver") || (coin_type == "silver" && c_type == "silver")){
				if(giftPrice * giftNum > total_coin || (coin_type == "silver" && c_type == "gold")){
					total_coin = giftPrice * giftNum;
					coin_type = c_type;
					var gif_url = "";
					var giftStaytime = 0;
					for(var i = 0; i < giftList.length;i++){
						var giftId = giftList[i]["id"];
						if(id == giftId)
						{
							gif_url = giftList[i]["webp"];
							giftStaytime = giftList[i]["stay_time"];
							break;
						}
					}
					if(gif_url != ""){
						if (timer != null)
							clearTimeout(timer);
						$('#gif').attr('src', gif_url);
						timer = setTimeout(function() {
							$('#gif').attr('src', '');
							total_coin = -1;
							coin_type = "silver";
							timer = null;
						}, (giftNum >= 25 ? 25 : giftNum) * giftStaytime * 1000);
					}
				}
			}
		}
		
		function setImage(id, suffix, duration) {
            if (timer != null)
                clearTimeout(timer);
            // 素材来源：智播学院 http://college.zbmate.com/#/gifts/b_gift_icon
            $('#gif').attr('src', 'http://openapi.zbmate.com/gift_icons/b/' + id + suffix);
			coin_type = "gold";
			total_coin = 138000;
			if (id == 'td')
				total_coin = 1998000;
			else if (id == 'zd')
				total_coin = 19998000;
            timer = setTimeout(function() {
                $('#gif').attr('src', '');
				total_coin = -1;
				coin_type = "silver";
				timer = null;
            }, duration);
        }
    </script>
</body>